<template>
  <v-container>
    <v-dialog
      v-model="dialog"
      :max-width="dialogWidth"
    >
      <v-card>
        <v-card-title>
          <span class="text-h3">
            {{ lanChar.ruleConfig.MCGroupStatusViewDialogTitle }}
          </span>
          <v-btn
            class="mx-0"
            fab
            icon
            x-small
            color="primary"
            @click="getMcGroupInfo()"
          >
            <v-icon>mdi-cached</v-icon>
          </v-btn>
        </v-card-title>
        <v-divider />
        <v-divider />
        <v-divider />
        <v-divider />
        <v-card-text class="text-h4 text--primary font-weight-medium">
          <v-container>
            <v-row
              dense
            >
              <v-col
                cols="12"
                sm="2"
              >
                <span>
                  {{ lanChar.ruleConfig.MCGroupRuleName }}:
                </span>
              </v-col>
              <v-col
                cols="12"
                sm="10"
              >
                <span>
                  {{ groupInfo.GroupName }}
                </span>
              </v-col>
            </v-row>
            <v-divider class="mb-3" />
            <v-row
              v-for="vTcp in groupInfo.TcpServerInfo.Uris"
              :key="vTcp.Uri"
              dense
              align="center"
            >
              <v-col
                cols="12"
                sm="2"
              >
                <span>
                  {{ lanChar.ruleConfig.MCGroupRuleTcpUri }}:
                </span>
              </v-col>
              <v-col
                cols="12"
                sm="10"
              >
                <span>
                  {{ vTcp.Uri }}
                </span>
                <v-btn
                  class="mx-0"
                  fab
                  icon
                  x-small
                  color="primary"
                  @click="statusDialog('McUriEditDialog', {val: groupInfo, mode: 'tcp-server-uri'})"
                >
                  <v-icon>mdi-note-edit-outline</v-icon>
                </v-btn>
              </v-col>
            </v-row>
            <v-divider class="mb-3" />
            <v-row
              v-for="(vUdp,iUdp) in groupInfo.UdpServerInfo.Uris"
              :key="iUdp"
              dense
              align="center"
            >
              <v-col
                cols="12"
                sm="2"
              >
                <span>
                  {{ lanChar.ruleConfig.MCGroupRuleUdpUri }}:
                </span>
              </v-col>
              <v-col
                cols="12"
                sm="10"
              >
                <span>
                  {{ vUdp.Uri }}
                </span>
                <v-btn
                  class="mx-0"
                  fab
                  icon
                  x-small
                  color="primary"
                  @click="statusDialog('McUriEditDialog', {val: groupInfo, mode: 'udp-server-uri'})"
                >
                  <v-icon>mdi-note-edit-outline</v-icon>
                </v-btn>
              </v-col>
            </v-row>
            <v-divider class="mb-3" />
            <v-row
              dense
              align="center"
            >
              <v-col
                cols="12"
                sm="2"
              >
                <span>
                  {{ lanChar.statsPkts }}:
                </span>
              </v-col>
              <v-col
                cols="12"
                sm="4"
              >
                <v-icon class="pr-3">
                  mdi-alpha-r-box-outline
                </v-icon>
                <span>{{ groupInfo.RxPkts }}</span>
              </v-col>
              <v-spacer />
              <v-col
                cols="12"
                sm="4"
              >
                <v-icon class="pr-3">
                  mdi-alpha-t-box-outline
                </v-icon>
                <span>{{ groupInfo.TxPkts }}</span>
              </v-col>
            </v-row>
            <v-divider class="mb-3" />
            <v-row
              dense
              align="center"
            >
              <v-col
                cols="12"
                sm="2"
              >
                <span>
                  {{ lanChar.statsBytes }}:
                </span>
              </v-col>
              <v-col
                cols="12"
                sm="4"
              >
                <v-icon class="pr-3">
                  mdi-alpha-r-box-outline
                </v-icon>
                <span>{{ groupInfo.RxBytes }}</span>
              </v-col>
              <v-spacer />
              <v-col
                cols="12"
                sm="4"
              >
                <v-icon class="pr-3">
                  mdi-alpha-t-box-outline
                </v-icon>
                <span>{{ groupInfo.TxBytes }}</span>
              </v-col>
            </v-row>
            <v-divider class="mb-3" />
            <v-row
              dense
            >
              <v-col
                cols="12"
                sm="2"
              >
                <span>
                  {{ lanChar.ruleConfig.MCGroupRuleClientUri }}:
                </span>
              </v-col>
              <v-col
                cols="12"
                sm="10"
              >
                <v-btn
                  class="mx-0"
                  fab
                  icon
                  x-small
                  color="primary"
                  @click="statusDialog('McUriEditDialog', {val: groupInfo, mode: 'terminal-uri'})"
                >
                  <v-icon>mdi-note-edit-outline</v-icon>
                </v-btn>
                <v-divider />
                <v-row
                  v-for="(vTerm,iTerm) in groupInfo.TerminalInfo.Uris"
                  :key="iTerm"
                  dense
                  align="center"
                >
                  <span>
                    {{ vTerm.Uri }}
                  </span>
                  <v-icon v-if="vTerm.Role===0">
                    mdi-alpha-s-circle
                  </v-icon>
                  <v-icon v-if="vTerm.Role===1">
                    mdi-alpha-c-circle
                  </v-icon>
                </v-row>
              </v-col>
            </v-row>
            <v-divider />
          </v-container>
        </v-card-text>
        <v-card-actions>
          <v-spacer />
          <v-btn
            color="blue darken-1"
            text
            @click="dialog = false"
          >
            {{ lanChar.operateClose }}
          </v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
    <material-snackbar-tip
      v-model="snackbarDescp.snackbar"
      :type="snackbarDescp.snackbarType"
      :timeout="snackbarDescp.snackbarTimeout"
      v-bind="{
        bottom: true,
        right: true
      }"
      :text="snackbarDescp.snackbarContent"
    />
    <alert-dialog
      v-model="alert.dialog"
      :title="alert.title"
      :msg="alert.msg"
    />
    <confirm-dialog
      v-model="confirm.dialog"
      :title="confirm.content.title"
      :msg="confirm.content.msg"
      :callback="confirm.operate.callback"
      :input="confirm.operate.input"
    />
    <mc-uri-edit-dialog
      v-model="status.mcUriEditDialog"
      :input="status.operate.input"
    />
  </v-container>
</template>

<script>
  import globalDef from '@/util/globals'
  import lan from '@/util/lan-char'
  import * as mcAxios from '@/util/mcaxios'
  export default {
    name: 'McGroupStatusViewDialog',
    props: {
      value: Boolean,
      input: Object,
    },
    data () {
      return {
        lanChar: lan.GetLan(),
        dialog: this.value,
        statusTimer: 0,
        dialogWidth: 1000, // document.body.clientWidth ||
        groupInfo: {
          GroupName: '',
          TcpServerInfo: {
            Uris: [
              { Uri: '' },
            ],
            ConnectionNum: 0,
          },
          UdpServerInfo: {
            Uris: [
              { Uri: '' },
            ],
            ConnectionNum: 0,
          },
          TerminalInfo: {
            Uris: [
              { Uri: '' },
            ],
            ConnectionNum: 0,
          },
        },
        mode: 'view',
        // snackbar data
        snackbarDescp: {
          snackbar: false,
          snackbarContent: 'snackbar content',
          snackbarTimeout: 2000,
          snackbarType: 'info',
        },
        // dialog data
        alert: {
          dialog: false,
          title: '',
          msg: '',
        },
        confirm: {
          dialog: false,
          content: {
            title: '',
            msg: '',
          },
          operate: {
            callback: null,
            input: null,
          },
        },
        status: {
          mcUriEditDialog: false,
          operate: {
            input: null,
          },
        },
      }
    },
    watch: {
      dialog (val, oldVal) {
        if (val === oldVal) return

        this.$emit('input', val)
        if (val === true) {
          this.startReflash()
        } else {
          clearInterval(this.statusTimer)
        }
      },
      value (val, oldVal) {
        if (val === oldVal) return
        this.dialog = val
      },
      input: {
        handler (val, oldVal) {
          if (val === oldVal) return
          if (val.val !== null && val.val !== undefined && val.val.GroupName !== undefined) {
            // this.groupInfo = JSON.parse(JSON.stringify(val.val))
            this.groupInfo.GroupName = val.val.GroupName
            this.getMcGroupInfo()
          }
          this.mode = val.mode
        },
        deep: true,
      },
    },
    created () {
      globalDef.VueObject.$on('lanChange', lanChar => {
        this.lanChar = lanChar
      })
    },
    mounted () {
      // this.getMcGroupInfo()
    },
    beforeDestroy () {
    },
    methods: {
      tipInfo (level, content, timeout) {
        this.snackbarDescp.snackbarType = level
        this.snackbarDescp.snackbarContent = content
        this.snackbarDescp.snackbarTimeout = timeout
        this.snackbarDescp.snackbar = true
      },
      alertInfo (title, content) {
        this.alert.dialog = true
        this.alert.title = title
        this.alert.msg = content
      },
      confirmDialog (title, msg, operate, data) {
        this.confirm.content.title = title
        this.confirm.content.msg = msg
        this.confirm.operate.callback = operate
        this.confirm.operate.input = data
        this.confirm.dialog = true
      },
      statusDialog (name, data) {
        this.status.operate.input = data
        if (name === 'McUriEditDialog') {
          this.status.mcUriEditDialog = true
        }
      },
      getMcGroupInfo () {
        const data = {
          request_type: 'mc group info get',
          instance_id: 'instance_id',
          sequence_no: 1000,
          data: {
            GroupName: this.groupInfo.GroupName,
          },
        }
        mcAxios.axiosGetConfig(data)
          .then((res) => {
            if (res.data.status === true) {
              this.groupInfo = {}
              this.groupInfo = res.data.data
            } else {
              console.log('getMcGroupInfo get res fail')
            }
          })
          .catch((e) => {
            console.log('getMcGroupInfo get fail: ', e)
          })
      },
      startReflash () {
        clearInterval(this.statusTimer)
        this.statusTimer = setInterval(this.getMcGroupInfo, globalDef.STATUS_QUERY_INTERVAL)
      },
    },
  }
</script>
